//经济核算系统主页面(测试阶段)
import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, DatePicker, Button, Table,Pagination,  } from 'antd';
import style from './CheckingSystem.less'
import moment from 'moment';


import {postCheck,reportformsinquire,CheckDelete} from "../../services/redmoe";
import publicService from "../../services/PublicService"
import request from '../../utils/request';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

const columns = [{
  title: '序号',
  dataIndex: 'num',
  width:70,
  align:"center"
 
  // render: text => <a href="javascript:;">{text}</a>,
}, {
  title: '日期',
  dataIndex: 'useDate',
  width:170,
  align:"center"
}, {
  title: '燃气耗量/Nm³',
  dataIndex: 'useNaturalGas',
  width:170,
  align:"center"
}
  
  , {
  title: '电耗量/KWh',
  dataIndex: 'useElectric',
  width:170,
  align:"center"
}, {
  title: '水耗量/t',
  dataIndex: 'useWater',
  width:170,
  align:"center"
}
  ];



// rowSelection object indicates the need for row selection

class CheckingSystem extends Component {
  state = {
    loading:false,
    dataSource:[],
    dataText:"",
    stati:{},
    datastring:"",
    textstring:"",
    row:"",
    rows:{},
    visible: false,
    rowCount:null,
    page:1,
    monthUseElectric:"",
    monthUseNaturalGas:"",
    monthUseWater:"",
    totalUseElectric:"",
    totalUseNaturalGas:"",
    totalUseWater:"",
    pageSize:10,
    rightSource:[
    
    ],
    rightColumns:[{
      title: '燃气耗量/Nm³',
      dataIndex: 'monthUseNaturalGas',
      key: 'monthUseNaturalGas',
      align:'center'
    }, {
      title: '电耗量/KWh',
      dataIndex: 'monthUseElectric',
      key: 'age',
      align:'center'
    }, {
      title: '水耗量/t',
      dataIndex: 'monthUseWater',
      key: 'monthUseWater',
      align:'center'
    }]
    
};


componentDidMount() {
   //进入页面获取列表分页查询数据
   let date = moment(new Date()).format("YYYY-MM")
  //  let dateText = moment(new Date()).format("YYYY-MM")
   
   var time=moment(new Date(),'YYYY-MM-DD')
    
 let dateText = time.format('YYYY年MM')
  this.setState({
    textstring:dateText
  })  
     
  //  console.log(dateText)

  let data = {
    page:1,
    rows:10,
    yearMonth:date
  }
  postCheck({...data}).then(data => {
    console.log(data)
    if(data.data.rc == 0) {
      var arr = data.data.ret.items
      arr.forEach(item => {
        item.useDate =item.takeTime
      });
    }

    // console.log(arr)
   this.setState({
     dataSource:arr,
     rowCount:data.data.ret.rowCount
   })
  })
  // 获取消耗量统计
  request(`/hh-management-web/gnhj/economicaccounting/getUseAccount?yearMonth=${date}`).then(data => {
    // console.log(data)
    if(data.data.rc == 0) {
     console.log(data)
     this.setState({
      monthUseElectric:data.data.ret.monthUse.monthUseElectric,
      monthUseNaturalGas:data.data.ret.monthUse.monthUseNaturalGas,
      monthUseWater:data.data.ret.monthUse.monthUseWater,
      totalUseElectric:data.data.ret.totalUse.totalUseElectric,
      totalUseNaturalGas:data.data.ret.totalUse.totalUseNaturalGas,
      totalUseWater:data.data.ret.totalUse.totalUseWater,
     })
    }
  })
}




  //查询按钮
  query = () => {
    console.log('查询')
    this.setState({
      loading:true,
      dataSource:[],
      rightColumns:[]
    })
  
    setTimeout(() => {
    
      let data = {
        page:1,
        rows:10,
        yearMonth:this.state.datastring
      }
      postCheck({...data}).then(data => {
        console.log(data)
        if(data.data.rc == 0) {
          let arr = data.data.ret.items
          arr.forEach(item => {
            item.useDate =item.takeTime
          });
          console.log(arr)
         this.setState({
           dataSource:arr,
           loading:false,
           rowCount:data.data.ret.rowCount
         })
        }
      
      })
    },500)

      // 获取消耗量统计
  request(`/hh-management-web/gnhj/economicaccounting/getUseAccount?yearMonth=${this.state.datastring}`).then(data => {
    // console.log(data)
    if(data.data.rc == 0) {
     console.log(data)
     this.setState({
      monthUseElectric:data.data.ret.monthUse.monthUseElectric,
      monthUseNaturalGas:data.data.ret.monthUse.monthUseNaturalGas,
      monthUseWater:data.data.ret.monthUse.monthUseWater,
      totalUseElectric:data.data.ret.totalUse.totalUseElectric,
      totalUseNaturalGas:data.data.ret.totalUse.totalUseNaturalGas,
      totalUseWater:data.data.ret.totalUse.totalUseWater,
     })
    }
  })


  }

  //分页器更改页数
  onShowSizeChange = (page,pageSize) => {
    console.log(page,pageSize)
    this.setState({
      pageSize:pageSize,
      page:page
    })
    let data = {
      page:page,
      rows:pageSize,
      yearMonth:this.state.datastring
    }

    postCheck({...data}).then(data => {
      console.log(data)
      let arr = data.data.ret.items
      arr.forEach(item => {
        item.useDate =item.takeTime
      });
      console.log(arr)
     this.setState({
       dataSource:arr
     })
    })
  }

  Pagination = (page,pageSize) => {
    this.setState({
      pageSize:pageSize,
      page:page
    })
    console.log(page,pageSize)
    let data = {
      page:page,
      rows:pageSize,
      yearMonth:this.state.datastring
    }
    postCheck({...data}).then(data => {
      console.log(data)
      let arr = data.data.ret.items
      arr.forEach(item => {
        item.useDate =item.takeTime
      });
      console.log(arr)
     this.setState({
       dataSource:arr
     })
    })
  }
  //重置按钮事件
  reset = () => {
    this.setState({
      textstring:"",
      page:1
    })
    let data = {
      page:1,
      rows:10,
      yearMonth:''
    }
    postCheck({...data}).then(data => {
      console.log(data)
      let arr = data.data.ret.items
      arr.forEach(item => {
        item.useDate =item.takeTime
      });
      console.log(arr)
     this.setState({
       dataSource:arr
     })
    })
  }

//月份日期选择器
  MonthPicker = (data,datastring) => {

   let text = datastring.split('-').join('年')
   this.setState({
     textstring:text
   })

   this.setState({
    datastring
   })
 
  }

  handleCancel = () => {
    this.setState({ visible: false, });
  };

  dianji = () => {
    window.open("file://C:/Users/1222/Desktop/exe")
//     var shell = new ActiveXObject("WSCRIPT.Shell"); 
// shell.Run("D:\\IP最新.xls",1); 
// javascript:Run("file://C:/Users/1222/Desktop/exe")
  }


  render() {


    return (
      <div>
        <div style={{ overflow: 'hidden' }}>

          <Card
          
            className={style.CardLeft}
          >
            <div className={style.DatePicker}>时间选取:
            <MonthPicker  placeholder="请选择月份"  onChange={this.MonthPicker.bind(this.MonthPicker)}/>
      
            </div>
            <br/>
            <Button  style={{marginRight:5}} className={style.primary} onClick={this.query}>查询</Button><Button onClick={this.reset} className={style.delete}>重置</Button>
            


          </Card>
          <Card
          id="main"
           className={style.CardRight}
           bodyStyle={{paddingBottom:0}}
           bodyStyle={{paddingTop:5}}
          >
          {/* <div className={style.my_Small_Table}>
           <Table size='small'  
              columns={this.state.rightColumns} 
              dataSource={this.state.rightSource}
              align='center'
              className={style.Small_Table}
             
              bordered={true}
              pagination={false}
            />
            </div> */}



        
          {/* <div className={style.use_leve}>
            <p><span>{this.state.textstring?this.state.textstring:""}</span>月用量</p>
            <span style={{float:"right"}}>累计用量</span>
          </div> */}

            <div className={style.warp}>
                <div className={style.divTd}>
                    <div className={style.oneDivTd}>
                    </div>
                    <td className={style.twotd}>【月消耗量】</td>
                    <td className={style.onetd}>【累计耗量】</td>
                </div>
                
                <div className={style.divTd}>
                        <div className={style.towDivTd}>
                        <div></div>
                    <span>燃气耗量(N/m³) </span>
                    </div>
                  
                    <td>{this.state.monthUseNaturalGas}</td>
                    <td>{this.state.totalUseNaturalGas}</td>
                </div>
                <div className={style.divTd}>
                        <div className={style.sanDivTd}>
                            <div></div>
                            <span>水耗量(m³) </span>
                        </div>
                       
                   
                    <td>{this.state.monthUseWater}</td>
                    <td>{this.state.totalUseWater}</td>
                </div>

                
                <div className={style.divTd}>
                <div className={style.siDivTd}>
                            <div></div>
                            <span>电耗量(KWh) </span>
                        </div>
                    <td>{this.state.monthUseElectric}</td>
                    <td>{this.state.totalUseElectric}</td>
                </div>
            </div>
          
          </Card>
        </div>

        <Card

         className={style.CardBottom}
        >
          
          <div className={style.myTable}>
            <Table size='small'  
              columns={columns} 
              dataSource={publicService.transformArrayData(this.state.dataSource,true,true)}
              align='center'
              className={style.Table}
              bordered={true}
              pagination={false}
              loading={this.state.loading}
            />
            </div>
            <Pagination showQuickJumper defaultCurrent={1}
                        total={this.state.rowCount} 
                        showSizeChanger
                        onChange={this.Pagination}
                        onShowSizeChange={this.onShowSizeChange}
                        showQuickJumper
                        className={style.Pagination}
                        current={this.state.page}
                        size='small'
                    />
          
        </Card>
      </div>
    )
  }
}

export default connect()(CheckingSystem)